@import '../helpers/mixin.scss';
.vxe-modal--box{
	visibility       :hidden;
	width            :420px;
	background-color :var(--vxe-ui-layout-background-color);
	border-radius    :var(--vxe-ui-base-border-radius);
	border           :1px solid var(--vxe-ui-base-popup-border-color);
	text-align       :left;
	pointer-events   :auto;
	opacity          :0;
	&.is--drag{
		cursor :move;
		.vxe-modal--body,
		.vxe-modal--footer{
			&:after{
				content  :'';
				position :absolute;
				top      :0;
				left     :0;
				width    :100%;
				height   :100%;
			}
		}
		.vxe-modal--body{
			overflow :hidden;
			.vxe-modal--content{
				overflow :hidden;
			}
		}
	}
}
.vxe-modal--aside{
	flex-shrink :0;
}
.vxe-modal--container{
	display        :flex;
	flex-direction :column;
	flex-grow      :1;
	overflow       :hidden;
}
.vxe-modal--status-wrapper{
	flex-shrink :0;
	display     :flex;
	align-items :center;
	font-size   :1.6em;
}
.vxe-modal--content{
	flex-grow   :1;
	white-space :pre-line;
}
.vxe-modal--body-default{
	width           :100%;
	/*修复下放内边距坍缩问题*/
	height          :100%;
	display         :flex;
	flex-direction  :column;
	flex-wrap       :nowrap;
	align-content   :flex-start;
	justify-content :flex-start;
	align-items     :stretch;
}
.vxe-modal--body-medium{
	width           :100%;
	/*修复下放内边距坍缩问题*/
	height          :100%;
	display         :flex;
	flex-direction  :column;
	flex-wrap       :nowrap;
	align-content   :flex-start;
	justify-content :flex-start;
	align-items     :stretch;
}
.vxe-modal--body-small{
	width           :100%;
	/*修复下放内边距坍缩问题*/
	height          :100%;
	display         :flex;
	flex-direction  :column;
	flex-wrap       :nowrap;
	align-content   :flex-start;
	justify-content :flex-start;
	align-items     :stretch;
}
.vxe-modal--body-mini{
	width           :100%;
	/*修复下放内边距坍缩问题*/
	height          :100%;
	display         :flex;
	flex-direction  :column;
	flex-wrap       :nowrap;
	align-content   :flex-start;
	justify-content :flex-start;
	align-items     :stretch;
}
.vxe-modal--header,
.vxe-modal--body,
.vxe-modal--footer{
	position :relative;
}
.vxe-modal--body{
	display   :flex;
	flex-grow :1;
}
.vxe-modal--header{
	display        :flex;
	flex-direction :row;
	align-items    :center;
	height         :2.8em;
	flex-shrink    :0;
	font-size      :1.1em;
	font-weight    :700;
	border-radius  :var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;
	user-select    :none;
	&.is--ellipsis{
		.vxe-modal--header-title{
			overflow      :hidden;
			text-overflow :ellipsis;
			white-space   :nowrap;
		}
	}
}
.vxe-modal--header-title{
	flex-grow :1;
	padding   :0.8em 0 0.8em 0.6em;
}
.vxe-modal--header-right{
	flex-shrink :0;
	padding     :0 0.6em 0 0;
}
.vxe-modal--zoom-btn,
.vxe-modal--close-btn{
	display         :inline-flex;
	align-items     :center;
	justify-content :center;
	width           :1.6em;
	height          :1.6em;
	margin-left     :0.5em;
	cursor          :pointer;
	&:hover{
		color :var(--vxe-ui-font-primary-color);
	}
}
.vxe-modal--footer{
	flex-shrink :0;
	text-align  :right;
	padding     :0.4em 1em 0.8em 1em;
}
.vxe-modal--resize{
	$SpaceSize  :8px;
	$SpaceWidth :5px;
	.wl-resize,
	.wr-resize,
	.swst-resize,
	.sest-resize,
	.st-resize,
	.swlb-resize,
	.selb-resize,
	.sb-resize{
		position :absolute;
		z-index  :100;
	}
	.wl-resize,
	.wr-resize{
		width  :$SpaceSize;
		height :100%;
		top    :0;
		cursor :w-resize;
	}
	.wl-resize{
		left :-$SpaceWidth;
	}
	.wr-resize{
		right :-$SpaceWidth;
	}
	.swst-resize,
	.sest-resize,
	.swlb-resize,
	.selb-resize{
		width   :$SpaceSize + 2;
		height  :$SpaceSize + 2;
		z-index :101;
	}
	.swst-resize,
	.sest-resize{
		top :-$SpaceSize;
	}
	.swlb-resize,
	.selb-resize{
		bottom :-$SpaceSize;
	}
	.sest-resize,
	.swlb-resize{
		cursor :sw-resize;
	}
	.swst-resize,
	.selb-resize{
		cursor :se-resize;
	}
	.swst-resize,
	.swlb-resize{
		left :-$SpaceSize;
	}
	.sest-resize,
	.selb-resize{
		right :-$SpaceSize;
	}
	.st-resize,
	.sb-resize{
		width  :100%;
		height :$SpaceSize;
		left   :0;
		cursor :s-resize;
	}
	.st-resize{
		top :-$SpaceWidth;
	}
	.sb-resize{
		bottom :-$SpaceWidth;
	}
}
.vxe-modal--wrapper{
	display     :none;
	position    :fixed;
	top         :0;
	left        :0;
	line-height :1.5;
	width       :calc(100% + 18px);
	height      :calc(100% + 18px);
	color       :var(--vxe-ui-font-color);
	font-family :var(--vxe-ui-font-family);
	&.is--active{
		display :block;
	}
	&.is--visible{
		&.is--mask{
			&:before{
				background-color :rgba(0, 0, 0, 0.5);
			}
		}
		.vxe-modal--box{
			opacity    :1;
			visibility :visible;
		}
	}
	&.is--loading{
		.vxe-modal--header,
		.vxe-modal--footer{
			position            :relative;
			border-bottom-color :var(--vxe-ui-loading-background-color);
			&:before{
				content          :'';
				position         :absolute;
				top              :0;
				left             :0;
				width            :100%;
				height           :100%;
				z-index          :1;
				user-select      :none;
				background-color :var(--vxe-ui-loading-background-color);
			}
		}
	}
	&:not(.lock--view){
		pointer-events :none;
	}
	&.is--draggable{
		&.zoom--revert,
		&.zoom--minimize{
			.vxe-modal--header-title{
				cursor :move;
			}
		}
	}
	&.zoom--minimize{
		& > .vxe-modal--box{
			& > .vxe-modal--body,
			& > .vxe-modal--footer{
				display :none;
			}
		}
	}
	&.type--modal,
	&.type--alert,
	&.type--confirm{
		&.lock--scroll{
			overflow :hidden;
		}
		&:not(.lock--scroll){
			overflow :auto;
		}
	}
	&.lock--view,
	&.is--mask{
		&:before{
			content        :'';
			position       :fixed;
			top            :0;
			left           :0;
			width          :100%;
			height         :100%;
			z-index        :-1;
			pointer-events :auto;
		}
	}
	&.is--mask{
		&:before{
			background-color :rgba(0, 0, 0, 0);
		}
	}
	&.is--animat{
		&.is--mask{
			&:before{
				@include createAnimationTransition(background-color, .2s);
			}
		}
	}
	&.type--message,
	&.type--notification,
	&.type--alert,
	&.type--confirm{
		.vxe-modal--body{
			white-space :normal;
			word-break  :break-word;
		}
	}
	&.type--message{
		.vxe-modal--box{
			opacity   :0;
			transform :translate(0, -100%);
		}
		&.is--visible{
			.vxe-modal--box{
				opacity   :1;
				transform :translate(0, 0);
			}
		}
	}
	&.type--notification{
		&.pos--top-right{
			.vxe-modal--box{
				opacity   :0;
				transform :translate(100%, 0);
			}
			&.is--visible{
				.vxe-modal--box{
					opacity   :1;
					transform :translate(0, 0);
				}
			}
		}
	}
	&.type--message,
	&.type--notification{
		width      :100%;
		height     :100%;
		padding    :0 var(--vxe-ui-layout-padding-double);
		text-align :center;
		transition :top .3s ease-in-out;
		&.pos--top-left{
			text-align :left;
		}
		&.pos--top-right{
			text-align :right;
		}
		.vxe-modal--box{
			display        :inline-flex;
			flex-direction :row;
			margin-top     :0;
			width          :auto;
			box-shadow     :0 0 8px 0 rgba(0, 0, 0, 0.1);
			@include createAnimationTransition(all, .3s, ease-out);
			.vxe-modal--body{
				&:after{
					content    :'';
					display    :block;
					clear      :both;
					height     :0;
					overflow   :hidden;
					visibility :hidden;
				}
			}
			.vxe-modal--content{
				max-width :800px;
				float     :left;
			}
		}
	}
	&.type--modal,
	&.type--alert,
	&.type--confirm{
		.vxe-modal--box{
			display        :flex;
			flex-direction :column;
			position       :fixed;
			left           :50%;
			top            :0;
			box-shadow     :var(--vxe-ui-base-popup-box-shadow);
		}
		.vxe-modal--header{
			border-bottom    :1px solid var(--vxe-ui-input-border-color);
			background-color :var(--vxe-ui-modal-header-background-color);
		}
		.vxe-modal--body{
			overflow :auto;
			.vxe-modal--content{
				overflow :auto;
			}
		}
	}
	&.status--info{
		.vxe-modal--status-wrapper{
			color :var(--vxe-ui-status-info-color);
		}
	}
	&.status--warning,
	&.status--question{
		.vxe-modal--status-wrapper{
			color :var(--vxe-ui-status-warning-color);
		}
	}
	&.status--success{
		.vxe-modal--status-wrapper{
			color :var(--vxe-ui-status-success-color);
		}
	}
	&.status--error{
		.vxe-modal--status-wrapper{
			color :var(--vxe-ui-status-danger-color);
		}
	}
	&.status--loading{
		.vxe-modal--status-wrapper{
			color :var(--vxe-ui-font-disabled-color);
		}
	}
	&.is--padding{
		.vxe-modal--aside{
			padding :0.8em 0 0.8em 0.6em;
		}
		.vxe-modal--body{
			padding :0.8em 0.6em;
			.vxe-modal--status-wrapper{
				padding-right :0.6em;
			}
		}
		&.type--notification{
			.vxe-modal--body{
				padding-top :0;
			}
		}
	}
	&.is--maximize{
		.vxe-modal--box{
			.vxe-modal--header{
				cursor :default;
			}
		}
		.vxe-modal--resize{
			.wl-resize,
			.wr-resize,
			.swst-resize,
			.sest-resize,
			.st-resize,
			.swlb-resize,
			.selb-resize,
			.sb-resize{
				display :none;
			}
		}
	}
}
.vxe-modal--wrapper{
	font-size :var(--vxe-ui-font-size-default);
	&.size--medium{
		font-size :var(--vxe-ui-font-size-medium);
	}
	&.size--small{
		font-size :var(--vxe-ui-font-size-small);
	}
	&.size--mini{
		font-size :var(--vxe-ui-font-size-mini);
	}
}